<template>
	<view>
		<view class="navheader">
			<view class="navheader-box fa jcc" :style="{paddingTop: utils.menuButtonTop(), height: utils.menuButtonHeight()}">
				<view class="navheader-inner fa">
					<view class="lefttab" :class="{active: navTabIndex == 0}" @click="navTabChange(0)">取送订单</view>
					<view class="righttab" :class="{active: navTabIndex == 1}" @click="navTabChange(1)">商城订单</view>
				</view>
			</view>
			<view class="header-place" :style="{paddingTop: utils.menuButtonTop(), height: utils.menuButtonHeight()}"></view>
		</view>
		<view>
			<view class="tabs fa bgf">
				<view class="tab" :class="{active: current == index}" v-for="(item, index) in tabList" :key="index" @click="tabChange(index)">{{item}}</view>
			</view>
			<view class="tabs-place"></view>
		</view>
		<view class="fetch-box" v-if="navTabIndex == 0 && list.length > 0">
			<view class="fetch-list" v-for="(item, index) in list" :key="index" @click="goDetail(item.ordersId)">
				<view class="title flex jcsb">
					<view class="flex1 fa">
						<view class="type">{{item.secondType == 1 ? '帮送' : '帮取'}}</view>
						<view class="time flex1 flex">
							<view>{{item.type == 0 ? '配送时间' : item.secondType == 0 ? '收货时间' : '发货时间'}}：</view>
							<view class="flex1 flex fww">
								<view style="margin-right: 10rpx;">{{item.today}}</view>
								<view>{{item.receivingTime}}</view>
								<view>~</view>
								<view>{{item.receivingEndTime}}</view>
							</view>
						</view>
					</view>
					<view class="state" v-if="item.state == 0">待付款</view>
					<view class="state" v-if="item.state == 1">待接单</view>
					<view class="state" v-if="item.state == 2">进行中</view>
					<view class="state" v-if="item.state == 3">已完成</view>
					<view class="state" v-if="item.state == 4">已取消</view>
				</view>
				<view class="fetch-bottom">
					<view class="address-list flex">
						<image class="receive-icon" src="../../static/fetch.png" mode=""></image>
						<view class="flex1">
							<view class="address">{{item.fetchEstate}}{{item.fetchDetails}}</view>
							<view class="fa">
								<view class="name">{{item.fetchName}}</view>
								<view class="mobile">{{item.fetchPhone}}</view>
							</view>
						</view>
					</view>
					<view class="address-list flex">
						<image class="receive-icon" src="../../static/receive.png" mode=""></image>
						<view class="flex1">
							<view class="address">{{item.sendEstate}}{{item.sendDetails}}</view>
							<view class="fa">
								<view class="name">{{item.sendName}}</view>
								<view class="mobile">{{item.sendPhone}}</view>
							</view>
						</view>
						<view class="after"></view>
					</view>
				</view>
				<!-- 配送中也能取消 -->
				<view class="operate fa jcfe" v-if="item.state == 1 || item.state == 2 || item.state == 3">
					<view class="cancel-btn fa jcc" @click.stop="cancelOrder(item.ordersId)" v-if="item.state == 1 || item.state == 2">取消订单</view>
					<view class="cancel-btn fa jcc" @click.stop="phoneCall(item.courier.phone)" v-if="item.state == 2">联系配送员</view>
					<view class="pay-btn fa jcc" @click.stop="confirmReceive(item.ordersId)" v-if="item.state == 2">确认收货</view>
					<!-- <view class="pay-btn fa jcc" @click.stop="payOrder(info.ordersId, info.money)" v-if="item.isPay == 0">立即支付</view> -->
					<view class="pay-btn fa jcc" @click.stop="commentRider(item.courierId, item.ordersId)" v-if="item.state == 3 && isEvaluate == 0">评价</view>
				</view>
			</view>
		</view>
		<view class="nodata-box" v-if="navTabIndex == 0 && nodata">
			<image class="nodata-img" src="../../static/nodata.png" mode=""></image>
			<view class="nodata-prompt">暂无订单~</view>
		</view>
		<view class="order-box" v-if="navTabIndex == 1 && list.length > 0">
			<view class="order-list" v-for="(item, index) in list" :key="index" @click="utils.navTo('/pages/order/order_mall', {id: item.ordersId})">
				<view class="title fa jcsb">
					<view class="fa">
						<!-- <view class="delivery-type">{{item.secondType == 1 ? '预约配送' : '立即配送'}}</view> -->
						<view>订单编号：{{item.ordersNo}}</view>
					</view>
					<view class="state" v-if="item.state == 0">待付款</view>
					<view class="state" v-if="item.state == 1">待接单</view>
					<view class="state" v-if="item.state == 2">进行中</view>
					<view class="state" v-if="item.state == 3">已完成</view>
					<view class="state" v-if="item.state == 4">已取消</view>
				</view>
				<view class="order-bottom">
					<view class="goods-box flex" v-for="(row, col) in item.ordersItemVoList" :key="col">
						<image class="goodsimg" :src="row.mainImg" mode=""></image>
						<view class="goods-right flex1 flex fdc jcsb">
							<view>
								<view class="name ell2">{{row.name}}</view>
								<view class="fa jcsb">
									<view class="minor">{{row.skuName.substr(0, row.skuName.length - 1)}}</view>
									<view class="count">x{{row.num}}</view>
								</view>
							</view>
							<view class="price-box fa">
								<view class="price tc1">￥{{row.price}}</view>
							</view>
						</view>
					</view>
					<view class="total fa jcfe">
						<view class="left">共{{item.ordersItemVoList.length}}件商品，总金额：</view>
						<view class="right">￥{{item.money}}</view>
					</view>
					<view class="operate fa jcfe" v-if="item.state == 1 || item.state == 2 || (item.state == 3 && item.isOverEvaluate == 0) || ((item.state == 0 || item.state == 3) && item.isPay == 0)">
						<view class="cancel-btn fa jcc" @click.stop="cancelOrder(item.ordersId)" v-if="item.state == 1 || item.state == 2">取消订单</view>
						<view class="cancel-btn fa jcc" @click.stop="phoneCall(item.courier.phone)" v-if="item.state == 2">联系配送员</view>
						<view class="pay-btn fa jcc" v-if="item.state == 3 && item.isOverEvaluate == 0">评价</view>
						<view class="pay-btn fa jcc" @click.stop="payOrder(item.ordersId, item.money, item.ordersNo)" v-if="(item.state == 0 || item.state == 3) && item.isPay == 0">立即支付</view>
					</view>
				</view>
			</view>
		</view>
		<view class="nodata-box" v-if="nodata">
			<image class="nodata-img" src="../../static/nodata.png" mode=""></image>
			<view class="nodata-prompt">暂无订单~</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navTabIndex: 0,
				tabList: ['全部', '待接单', '进行中', '已完成'],
				current: 0,
				page: 1,
				count: 0,
				list: [],
				nodata: 0
			};
		},
		onLoad() {
			
		},
		onShow() {
			if(uni.getStorageSync('orderTab')) {
				this.navTabIndex = uni.getStorageSync('orderTab') - 1
				setTimeout(() => {
					uni.removeStorageSync('orderTab')
				}, 1000)
				this.page = 1
				this.count = 0
				this.list = []
				this.getOrder()
			}else {
				this.page = 1
				this.count = 0
				this.list = []
				this.getOrder()
			}
		},
		onPullDownRefresh() {
			setTimeout(() => {
				this.getOrder()
				uni.stopPullDownRefresh()
			}, 1000)
		},
		onReachBottom() {
			if(this.list.length < this.count) {
				this.page++
				this.getOrder()
			}
		},
		methods: {
			navTabChange(index) {
				this.navTabIndex = index
				this.current = 0
				this.getOrder()
			},
			tabChange(index) {
				this.current = index
				this.getOrder()
			},
			getOrder() {
				this.api.orderListFunc({
					type: this.navTabIndex == 0 ? 1 : 0,
					state: this.current == 0 ? '' : this.current,
					pageNum: this.page
				}).then(res => {
					if(res.code == 200) {
						this.count = res.total
						this.list = this.page == 1 ? res.rows : this.list.concat(res.rows)
						this.nodata = this.list.length > 0 ? 0 : 1
						this.list.forEach(item => {
							item.today = item.day.substr(5, 2) + '/' + item.day.substr(8, 2)
						})
						console.log(this.list)
					}else if(res.code == 401) {
						uni.showModal({
							title: '提示',
							content: '是否前往登录',
							success: result => {
								if(result.confirm) {
									uni.navigateTo({
										url: '/pages/login/login'
									})
								}
							}
						})
						this.page = 1
						this.count = 0
						this.list = []
						this.nodata = 1
					}else {
						this.page = 1
						this.count = 0
						this.list = []
						this.nodata = 1
					}
				})
			},
			goDetail(id) {
				if(this.navTabIndex == 0) {
					uni.navigateTo({
						url: '/pages/order/order_fetch?id=' + id
					})
				}else if(this.navTabIndex == 1) {
					uni.navigateTo({
						url: '/pages/order/order_mall?id=' + id
					})
				}
			},
			// 取消订单
			cancelOrder(id) {
				uni.showModal({
					title: '提示',
					content: '是否取消订单',
					success: result => {
						if(result.confirm) {
							this.api.orderUpdateFunc({
								ordersId: id,
								state: 4
							}).then(res => {
								if(res.code == 200) {
									uni.showToast({
										title: '订单已取消'
									})
									setTimeout(() => {
										this.getOrder()
									})
								}else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
							}).catch(err => {
								uni.showToast({
									title: '操作失败',
									icon: 'none'
								})
							})
						}
					}
				})
			},
			// 支付订单
			payOrder(id, money, ordersNo) {
				uni.navigateTo({
					url: '/pages/order/order_pay' + '?id=' + id + '&money=' + money + '&ordersNo=' + ordersNo
				})
			},
			// 联系配送员
			phoneCall(phone) {
				let phoneNumber = String(phone)
				uni.makePhoneCall({
					phoneNumber: phoneNumber
				})
			},
			// 确认收货
			confirmReceive(id) {
				uni.showModal({
					title: '提示',
					content: '是否确认收货',
					success: result => {
						if(result.confirm) {
							this.api.orderUpdateFunc({
								ordersId: id,
								state: 3
							}).then(res => {
								if(res.code == 200) {
									uni.showToast({
										title: '已确认收货'
									})
									this.getOrder()
								}else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
							}).catch(err => {
								uni.showToast({
									title: '操作失败',
									icon: 'none'
								})
							})
						}
					}
				})
			},
			// 评价配送员
			commentRider(cid, oid) {
				uni.navigateTo({
					url: '/pages/order/comment_rider?id=' + cid + '&ordersId=' + oid
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.navheader-box{
		position: fixed;
		left: 0;
		right: 0;
		padding-bottom: 16rpx;
		background-color: #fff;
		z-index: 999;
		.navheader-inner{
			border-radius: 32rpx;
			box-sizing: border-box;
			.lefttab{
				width: 136rpx;
				height: 64rpx;
				line-height: 64rpx;
				border: 2rpx solid var(--theme);
				border-right: none;
				border-radius: 32rpx 0 0 32rpx;
				text-align: center;
				font-size: 26rpx;
				font-weight: bold;
				color: var(--theme);
				background-color: #fff;
				&.active{
					border: 2rpx solid transparent;
					border-right: none;
					color: #fff;
					background: linear-gradient( 270deg, #6CE083 0%, #3DBF63 100%);
				}
			}
			.righttab{
				width: 136rpx;
				height: 64rpx;
				line-height: 64rpx;
				border: 2rpx solid var(--theme);
				border-left: none;
				border-radius: 0 32rpx 32rpx 0;
				text-align: center;
				font-size: 26rpx;
				font-weight: bold;
				color: var(--theme);
				background-color: #fff;
				&.active{
					border: 2rpx solid transparent;
					border-right: none;
					color: #fff;
					background: linear-gradient( 270deg, #6CE083 0%, #3DBF63 100%);
				}
			}
		}
	}
	.header-place{
		padding-bottom: 16rpx;
	}
	.tabs{
		position: fixed;
		z-index: 999;
		left: 0;
		right: 0;
		padding: 0 40rpx;
		.tab{
			flex: 1;
			position: relative;
			padding: 0 20rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 26rpx;
			color: #666;
			&.active{
				font-size: 30rpx;
				font-weight: bold;
				color: #333;
				&::after{
					content: '';
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 40rpx;
					height: 6rpx;
					border-radius: 3rpx;
					background: linear-gradient( 270deg, #6CE083 0%, #3DBF63 100%);
				}
			}
		}
	}
	.tabs-place{
		height: 80rpx;
	}
	.fetch-box{
		padding: 20rpx 28rpx 10rpx;
		.fetch-list{
			margin-bottom: 20rpx;
			padding: 20rpx 22rpx;
			border-radius: 20rpx;
			background-color: #fff;
			.type{
				padding: 0 14rpx;
				height: 48rpx;
				line-height: 48rpx;
				border-radius: 8rpx;
				font-size: 24rpx;
				font-weight: bold;
				color: #18C954;
				background-color: #E7F4EA;
			}
			.time{
				margin-left: 10rpx;
				font-size: 26rpx;
				color: #282828;
			}
			.state{
				font-size: 26rpx;
				color: #FE3134;
			}
			.fetch-bottom{
				margin-top: 18rpx;
				padding: 2rpx 30rpx 36rpx;
				border-radius: 20rpx;
				background-color: #F9F9F9;
				.address-list{
					position: relative;
					margin-top: 38rpx;
					&:last-child{
						.after{
							position: absolute;
							left: 23rpx;
							top: -64rpx;
							width: 2rpx;
							height: 60rpx;
							border-left: 2rpx dashed #BDBDBD;
							&.noaddr{
								top: -46rpx;
							}
						}
					}
					.receive-icon{
						margin-top: 4rpx;
						margin-right: 14rpx;
						width: 46rpx;
						height: 40rpx;
					}
					.mobile{
						margin-left: 36rpx;
					}
					.address{
						margin-bottom: 10rpx;
						color: #222;
						font-weight: bold;
					}
					.name{
						font-size: 24rpx;
						color: #999;
					}
					.mobile{
						margin-left: 36rpx;
						font-size: 24rpx;
						color: #999;
					}
				}
			}
			.operate{
				margin-top: 20rpx;
				.cancel-btn{
					margin-left: 20rpx;
					padding: 0 30rpx;
					height: 60rpx;
					border-radius: 30rpx;
					border: 2rpx solid #2ECB53;
					color: #2ECB53;
				}
				.pay-btn{
					margin-left: 20rpx;
					padding: 0 30rpx;
					height: 60rpx;
					border-radius: 30rpx;
					border: 2rpx solid transparent;
					color: #fff;
					background: linear-gradient( 270deg, #6CE083 0%, #3DBF63 100%);
				}
			}
		}
	}
	.order-box{
		padding: 20rpx 30rpx 50rpx;
		.order-list{
			margin-bottom: 20rpx;
			padding: 20rpx;
			border-radius: 10rpx;
			background: #fff;
			.title{
				font-size: 24rpx;
				.delivery-type{
					    margin-right: 20rpx;
					    padding: 2rpx 10rpx;
					    border: 2rpx solid #fcb52c;
					    color: #fcb52c;
					    border-radius: 6rpx;
				}
				.status{
					font-size: 24rpx;
					color: #aaa;
				}
			}
			.order-bottom{
				margin-top: 24rpx;
				padding-top: 24rpx;
				padding-bottom: 2rpx;
				border-top: 2rpx solid #EFEFEF;
				.goods-box{
					margin-bottom: 20rpx;
					.goodsimg{
						margin-right: 20rpx;
						width: 180rpx;
						height: 180rpx;
						border-radius: 10rpx;
					}
					.goods-right{
						padding-bottom: 6rpx;
					}
					.name{
						margin-bottom: 4rpx;
						font-weight: bold;
					}
					.price-box{
						margin-top: 20rpx;
					}
					.price{
						font-weight: bold;
					}
					.count{
						font-size: 26rpx;
						color: #5B5B5A;
					}
				}
				.total{
					.left{
						font-size: 22rpx;
						color: #777;
					}
					.right{
						font-weight: bold;
					}
				}
				.operate{
					margin-top: 20rpx;
					padding-top: 20rpx;
					border-top: 2rpx solid #eee;
					::v-deep .u-count-down__text{
						color: #FE2525;
					}
					.cancel-btn{
						margin-left: 20rpx;
						padding: 0 32rpx;
						height: 64rpx;
						border-radius: 32rpx;
						border: 2rpx solid #aaa;
						color: #777;
					}
					.pay-btn{
						margin-left: 20rpx;
						width: 160rpx;
						height: 60rpx;
						border-radius: 30rpx;
						border: 2rpx solid var(--theme);
						color: #fff;
						background: var(--theme);
					}
				}
			}
		}
	}
</style>
